<template>
    <!-- <detail-dialog ref="refDetailDialog"> -->
    <dialog-info ref="refDetailDialog">
        <!-- 标题 -->
        <template #DialogTitle>
            <span>预警列表</span>
        </template>

        <!-- 内容 -->
        <template #DialogContainer>
            <div class="container">
                <el-table :data="tableData" stripe height="60vh" v-loading="loading">
                    <el-table-column type="index" width="100" label="#" align="center">
                        <template #default="scope">
                            预警区域{{ scope.row.clusterId }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="complaintIdListStr" label="投诉ID" width="300" /> -->
                    <el-table-column type="index" label="关联投诉数量" align="center" width="120">
                        <template #default="scope">
                            {{ scope.row.complaintIdListStr ? scope.row.complaintIdListStr.split(',').length : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="cgiList" label="cgi" width="auto" min-width="180" show-overflow-tooltip />
                    <el-table-column prop="stationNameList" width="auto" label="小区名称" min-width="220"
                        show-overflow-tooltip />
                    <el-table-column label="故障分析" width="80" align="center">
                        <template #default="scope">
                            <span style='color: #cfa4ff'>
                                {{ scope.row.alarmResult ? scope.row.alarmResult : '-' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="高干扰分析" width="95" align="center">
                        <template #default="scope">
                            <span style='color: #409eff'>
                                {{ scope.row.alarmResult ? scope.row.interferenceResult : '-' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="性能分析" width="80" align="center">
                        <template #default="scope">
                            <span style='color: #409eff'>
                                {{ scope.row.alarmResult ? scope.row.performanceResult : '-' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="高负荷分析" width="95" align="center">
                        <template #default="scope">
                            <span style='color: #e2aa53'>
                                {{ scope.row.interferenceResult ? scope.row.interferenceResult : '-' }}
                            </span>
                        </template>
                    </el-table-column>
                    <!--  <el-table-column type="index" label="cgi" align="center" width="100">
                        <template #default="scope">
                            <div class="list_res" v-if="scope.row.complaintIdListStr">
                                <p v-for="item in scope.row.complaintIdListStr.split(',').slice(0, 2)">{{ item
                                    }}</p>
                                <el-tooltip placement="right" effect="light">
                                    <template #content>
                                        <div v-for="item in scope.row.complaintIdListStr.split(',').slice(2)">
                                            {{ item }}
                                        </div>
                                    </template>
                                    <el-button>+{{ scope.row.complaintIdListStr.split(',').length - 2 > 0 ?
                                        scope.row.complaintIdListStr.split(',').length
                                        - 2 : '' }}</el-button>
                                </el-tooltip>
                            </div>
                            <span v-else>-</span>
                        </template>
                    </el-table-column> -->
                    <!-- <el-table-column type="index" label="小区名称" align="center" width="auto" min-width="300"
                        show-overflow-tooltip>
                        <template #default="scope">
                            <div class="list_res" v-if="scope.row.complaintIdListStr">
                                <p v-for="item in scope.row.complaintIdListStr.split(',').slice(0, 1)">
                                    小区名称H11549228-宁波鄞州中河名庭节点机房CRAN@宁波鄞州春江花城-H5H-26104-211，{{ item
                                    }}</p>
                                <el-tooltip placement="right" effect="light">
                                    <template #content>
                                        <div v-for="item in scope.row.complaintIdListStr.split(',').slice(1)">
                                            {{ item }}
                                        </div>
                                    </template>
                                    <el-button>+{{ scope.row.complaintIdListStr.split(',').length - 1 > 0 ?
                                        scope.row.complaintIdListStr.split(',').length
                                        - 1 : '' }}</el-button>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column> -->
                    <el-table-column fixed="right" label="操作" align="center" width="100">
                        <template #default="scope">
                            <el-button size="large" link type="primary" circle icon="Aim"
                                @click="aimPosition(scope.row)" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>
    </dialog-info>
</template>

<script setup>
import { ref } from 'vue'
// import DetailDialog from "@/components/OpenlayerBaseMap/components/DetailDialog.vue";
// api相关 - 工具
import { apiCommon, getFormulateDate } from "@/utils/index.js";
import * as complainApi from "@/api/complain/complain";
import { complainDataStore } from '@/store/modules/complain.js'  // store

const emit = defineEmits(['setAutoPopup'])

const complainStoreData = complainDataStore()

const refDetailDialog = ref(null);
const tableData = ref([]);

let loading = ref(true)

/**
 * 业务
 */
const show = (val) => {
    refDetailDialog.value.show();
    refDetailDialog.value.setDialogWidth('80%');

    // console.log(complainStoreData.complainTime)

    setComplainDetailData();
};

const setComplainDetailData = async () => {
    const params = {
        date: complainStoreData.complainTime,
    }

    loading.value = true
    let complaintList = await apiCommon(complainApi.queryComplaintCluster, params);
    tableData.value = complaintList.data;

    loading.value = false
}

const aimPosition = (row) => {
    // console.log('aimPosition')

    refDetailDialog.value.hide();

    emit('setAutoPopup', row)

    setTimeout(() => {
        refDetailDialog.value.show();
    }, 3000)
}

const setListRes = (val) => {
    const list = val.split(',').slice(0, 2).join(',')
    console.log(list)

    return val + '\n'
    /* if (!val) {
        return ''
    }
    const list = val.split(',')
    if (list.length === 0) {
        return ''
    }
    return list.join(',') */
}

defineExpose({
    show,
});

</script>

<style lang="scss" scoped>
.list_res {
    /*  position: relative;
    width: 100%;
    min-height: 52px;
    height: initial; */

    .el-button {
        position: relative;
        // position: absolute;
        /*  right: 33px;
        padding: 3px; */
        height: auto;
        margin-right: -30px;

        span {
            font-size: 12px;
        }
    }
}
</style>